<template>
  <view>
    <view class="input">
      <u-search placeholder="请输入商品名称" v-model="keyword" height="68rpx" focus @search="handleSearch"
        @custom="handleSearch"></u-search>
    </view>
    <view class="recommends">
      <view class="title f16 bold text-left">大家都在搜</view>
      <view class="list flex flex-wrap">
        <view class="rec-item" v-for="(item,index) in searchList" :key="index" @click="handleSearch(item)">{{item}}
        </view>
      </view>
      <view class="title flex f16 bold justify-between align-center">
        <view class="title-text">历史搜索</view>
        <view class="iconfont icon-lajixiang f18" @click="clearHistory"></view>
      </view>
      <view class="list flex flex-wrap">
        <view class="rec-item" v-for="(item,index) in historyList" :key="index" @click="handleSearch(item)">{{item}}
        </view>
      </view>
    </view>
    <view class="goods-list flex flex-wrap justify-between">
      <view class="goods-item" v-for="item in goodsList" :key="item.id">
        <goods-item :gdata="item"></goods-item>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        keyword: '',
        searchList: ['拿破仑莓恋', '聚会', '生日', '白色恋人', '安逸兔'],
        historyList: [],
        goodsList: [],
        page: 0,
        timer: null,
        isLoading: false
      }
    },
    onLoad() {
      this.historyList = JSON.parse(uni.getStorageSync('ht') || '[]')
    },
    onReachBottom() {
      this.isLoading && this.loadMore(this.keyword)
    },
    onPullDownRefresh() {
      this.page = 0
      this.goodsList = []
      this.handleSearch(this.keyword,() => {uni.stopPullDownRefresh()})
    },
    methods: {
      clearHistory() {
       this.historyList = [] ,
       uni.setStorageSync('ht','[]')
      },
      handleSearch(val,cb) {
        this.page = 0
        const ht = [].concat(this.historyList)
        // let url = `/1.1/classes/classify?where={"name":{"$regex":"[${val}]"}}`
        let skip = this.page * 8
        let url =
          `/1.1/classes/classify?where={"$or":[{"name":{"$regex":"[${val}]"}},{"sname":{"$regex":"[${val}]"}}]}&limit=8&skip=${skip}`
        if (val && val !== '') {
          ht.unshift(val)
          this.historyList = Array.from(new Set(ht))
          uni.setStorageSync('ht',JSON.stringify(this.historyList))
          this.keyword = val
          clearTimeout(this.timer)
          this.timer = setTimeout(() => {
            this.$H.get(url).then(res => {
              console.log(res);
              this.goodsList = res.data.results
              this.page++
            })
          }, 500)
        }
        cb && cb()
        this.isLoading = true
      },
      loadMore(val) {
        let skip = this.page * 8
        let url =
          `/1.1/classes/classify?where={"$or":[{"name":{"$regex":"[${val}]"}},{"sname":{"$regex":"[${val}]"}}]}&limit=8&skip=${skip}`
        this.isLoading = false
        this.$H.get(url).then(res => {
          // console.log(res, "page++++");
          if (res.data.results.length > 0) {
            this.goodsList = this.goodsList.concat(res.data.results)
            this.page++
            this.isLoading = true
          } else {
            this.isLoading = false
            uni.showToast({
              title: "没有了哦~",
              icon: "none"
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .input {
    margin: 20rpx 0;
  }

  .recommends {
    .title {
      margin: 0 20rpx 10rpx 20rpx;
    }

    .list {
      .rec-item {
        height: 36rpx;
        line-height: 36rpx;
        background-color: #ffe32a;
        padding: 0 10rpx;
        margin-left: 20rpx;
        margin-bottom: 20rpx;
        border-radius: 18rpx;
      }
    }
  }

  .goods-list {
    padding: 16rpx;

    .goods-item {
      margin-bottom: 20rpx;
    }
  }
</style>
